<template>
  <div>
    <el-table
      ref="eltable"
      :show-header="shoHeader"
      v-loading="loading"
      :data="pageList"
      :height="height"
      :selection="selection"
      stripe
      border
      highlight-pageNum-row
      @selection-change="tableSelectionChange"
      @expand-change="expandChange"
      @select="selectRow"
      @select-all="selectAll"
      @cell-click="cellClick"
      @sort-change="sortChange"
      :span-method="spanMethod"
      style="width: 100%">

      <el-table-column
        v-if="selection"
        type="selection"
        width="50">
      </el-table-column>
      <!--编号-->
      <el-table-column
        v-if="index"
        label="编号"
        width="50"
        type="index"
        :index="indexFn"
      >
      </el-table-column>

      <el-table-column
        type="expand"
        header-align="center"
        v-if="checkDetail"
        label="查看"
        width="50"
      >
        <template slot-scope="scope">
          <div class="order-list-item">
            <table style="border-collapse: collapse;width:100%" align="center" class="table-container">
              <tr>
                <td>商品信息</td>
                <td>订单商品状态</td>
                <td>售后状态</td>
                <td>数量</td>
                <td>商品售价</td>
                <td>实收金额</td>
              </tr>
              <tr v-for="item in scope.row.productOrderItems">
                <td style="width: 300px">
                  <el-row>
                    <el-col :span="5"><img :src="item.mainImage" alt="" class="item-image"></el-col>
                    <el-col :span="18" class="item-title">{{item.title}}</el-col>
                  </el-row>
                </td>
                <td>{{item.shipStatus|orderStatusFilter}}</td>
                <td>{{item.refundStatus|refundStatusFilter}}</td>
                <td> X{{item.productNum}}</td>
                <td>￥{{item.productSalePrice}}</td>
                <td>￥{{item.productAmount}}</td>
              </tr>
            </table>
          </div>
        </template>
      </el-table-column>
      <!--  普通单元格 -->
      <template v-for="(item,index) in columns">

        <template v-if="item.field">

          <!--  自定义单元格 -->
          <el-table-column
            v-if="templateDiv && templateDiv[item.field]"
            :key="item.field"
            :header-align="item.headerAlign||'center'"
            :label="item.label"
            :align="item.align"
            :min-width="item.width"
            :prop="item.field"
            :sortable="item.sortable"
          >
            <template slot-scope="scope" slot="header">
              <span v-show="item.addText" :style="{color:item.addTextColor}">{{item.addText}}</span>{{item.label}}
            </template>
            <template slot-scope="scope">
              <slot :row="scope.row" :index="scope.$index" :name="item.field"></slot>
            </template>
          </el-table-column>

          <!--自定义表头-->
          <el-table-column v-else-if="customHeader && customHeader[item.field]"
                           :key="item.field+ index"
                           :header-align="item.headerAlign||'center'"
                           :label="item.label"
                           :align="item.align"
                           :prop="item.field">
            <template slot-scope="scope" slot="header">
              {{item.label}}
              <el-tooltip class="item" effect="dark" :content="filterTip(item.field)" placement="top-start">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column v-else-if="filterlist && filterlist[item.field]"
                           :key="item.field+ index"
                           :header-align="item.headerAlign||'center'"
                           :label="item.label"
                           :align="item.align"
                           :prop="item.field">
            <template slot-scope="scope">
              <slot>{{item.field | filterkey(scope.row) }}</slot>
            </template>
          </el-table-column>

          <!-- 图片单元格 -->
          <el-table-column
            v-else-if='imglist && imglist[item.field]'
            :key="item.field+ index"
            :header-align="item.headerAlign||'center'"
            :label="item.label"
            :align="item.align"
            :prop="item.field"
          >
            <template slot-scope="scope">
              <div v-if="handleImageUrl(scope.row)">
                <img width="25" height="25" :src="handleImageUrl(scope.row)" alt="">
              </div>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <!--          月龄区间-->
          <el-table-column
            v-else-if="item.field ==='experienceCourse'"
            :key="item.field+ index"
            :header-align="item.headerAlign||'center'"
            :label="item.label"
            :align="item.align"
            :prop="item.field"
          >
            <template slot-scope="scope">
              {{scope.row.monthAge}}-{{scope.row.endMonthAge}}
            </template>
          </el-table-column>

          <!--  普通单元格 -->
          <el-table-column
            v-else
            :key="'col'+ index"
            :header-align="item.headerAlign||'center'"
            :label="item.label"
            :align="item.align"
            :prop="item.field"
            :width="item.width"
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              {{item.type==='money'?'￥':''}}{{scope.row[item.field]?scope.row[item.field]:'-'}}
            </template>
          </el-table-column>
        </template>
      </template>
      <!-- 状态切换功能 -->
      <el-table-column
        header-align="center"
        v-if="statusOption"
        label="状态"
        width="80"
      >
        <template slot-scope="scope">
          <el-switch v-if="scope.row.hasOwnProperty('enabled')"
                     v-model="scope.row.enabled" active-color="#13ce66" inactive-color="#ff4949"
                     @change="changeStatus(arguments[0], scope.row)"
          >
          </el-switch>
          <el-switch v-if="scope.row.hasOwnProperty('enable')"
                     v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949"
                     @change="changeStatus(arguments[0], scope.row)">
          </el-switch>
          <el-switch v-if="scope.row.hasOwnProperty('publishStatus')"
                     v-model="scope.row.publishStatus" active-color="#13ce66" inactive-color="#ff4949"
                     @change="changeStatus(arguments[0], scope.row)">
          </el-switch>
        </template>
      </el-table-column>

      <!-- 操作 编辑功能 -->
      <el-table-column
        header-align="center"
        v-if="editbtn"
        label="操作"
        width="80"
      >
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" @click="editBtn(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>

      <!-- 操作 编辑查看 功能 -->
      <el-table-column
        header-align="center"
        v-if="editlook"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-edit" @click="editBtn(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="editLook(scope.$index, scope.row)" icon="el-icon-view">查看</el-button>
        </template>
      </el-table-column>

      <!-- 操作按钮处理 -->
      <el-table-column
        header-align="center"
        v-if="editBtnMap"
        label="操作"
        :width='editBtnMapWidth'>
        <template slot-scope="scope">
          <el-button size="mini" v-if="editBtnMapList.indexOf('view') != -1"
                     @click="editBtnClick(scope.$index, scope.row ,'view')">查看
          </el-button>
          <el-button size="mini" icon="el-icon-edit" v-if="(editBtnMapList.indexOf('update') != -1)"
                     @click="editBtnClick(scope.$index, scope.row ,'update')">编辑
          </el-button>
          <el-button size="mini" v-if="editBtnMapList.indexOf('reset') != -1"
                     @click="editBtnClick(scope.$index, scope.row ,'reset')">重置密码
          </el-button>
          <el-button size="mini" type="danger"
                     v-if="editBtnMapList.indexOf('offline') !== -1 && scope.row.publishStatus == 1"
                     @click="editBtnClick(scope.$index, scope.row ,'offline')">下线
          </el-button>
          <el-button size="mini" type="danger"
                     v-if="editBtnMapList.indexOf('delete') !== -1"
                     @click="editBtnClick(scope.$index, scope.row ,'delete')">删除
          </el-button>
          <el-button size="mini" icon="el-icon-video-play" type="primary"
                     v-if="editBtnMapList.indexOf('play') != -1 && scope.row.musicUrl"
                     @click="editBtnClick(scope.$index, scope.row ,'play')">播放
          </el-button>
          <el-button size="mini" type=""
                     v-if="editBtnMapList.indexOf('dispose') != -1 && scope.row.feedbackStatus == 0 "
                     @click="editBtnClick(scope.$index, scope.row ,'dispose')">处理
          </el-button>
          <el-button size="mini" type="primary"
                     v-if="editBtnMapList.indexOf('follow') != -1 "
                     @click="editBtnClick(scope.$index, scope.row ,'follow')">备注
          </el-button>
          <el-button size="mini"
                     :type="(scope.row.enable||scope.row.enabled||scope.row.publishStatus||scope.row.storeStatus)?'danger':'primary'"
                     v-if="editBtnMapList.indexOf('switchStatus') != -1"
                     @click="editBtnClick(scope.$index ,scope.row ,'switchStatus')">
            {{(scope.row.enable||scope.row.enabled||scope.row.publishStatus||scope.row.storeStatus)?'禁用':'启用'}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--图片预览-->
    <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="60%"
      class="img-preview-dialog">
      <div class="tx-c">
        <img v-if="imageUrl" :src="imageUrl" class="preview">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  /*import TransactionView from '@/components/LookDetail/transaction.vue'
  import ApplyafterView from '@/components/LookDetail/applyafter.vue'
  import RefundView from '@/components/LookDetail/refund.vue'
  import ConsignmentView from '@/components/LookDetail/consignmentd.vue'*/

  export default {
    name: 'TableView',
    props: {
      shoHeader: {
        type: Boolean,
        default: true
      },
      filterlist: null, //根据 status 进行显示转换
      imglist: {},
      customText: { //自定义操作的标题， 默认'操作'
        type: String,
        default: '操作'
      },
      customWidth: { //自定义操作的宽度
        type: String,
        default: '80'
      },
      selection: false,
      index: false,
      collect: false,

      checkDetail: false,
      statusOption: false,
      editbtn: false,
      editdel: false,
      editlook: false,
      editBtnMap: false,
      height: [String, Number],
      loading: {
        type: Boolean,
        default: false
      },
      loadingimg: {
        type: Boolean,
        default: false
      },
      pageList: {
        type: Array,
        default:()=>[]
      },
      columns: {
        type: Array,
        default: []
      },
      editBtnMapList: {
        type: Array,
        default: () => []
      },
      editBtnMapDisabledKey: {
        type: Array,
        default: () => []
      },
      indexMethod: {
        type: Function
      },
      templateDiv: {},
      customHeader: {},
      spanMethod:{type:Function}
    },
    data() {
      return {
        routename: '',
        dialogVisible: false,
        imageUrl: ''
      }
    },
    computed: {
      editBtnMapWidth() {
        return this.editBtnMapList.length * 110
      }
    },
    filters: {
      filterkey: function (keys, data) {
        let _fildata = {
          clientOs: {
            10: '全部',
            1: '安卓',
            2: 'ios'
          },
          refundStatus: {
            1: '退款中',
            2: '退款成功',
            3: '退款失败'
          }
        }
        return (keys in _fildata) ? _fildata[keys][data[keys]] : data[keys]
      },
      orderStatusFilter:function (val) {
        let orderStatus={
          0:'未发货',1:'待发货',2:'已发货',3:'已签收'
        }
        return orderStatus[val]
      },
      refundStatusFilter:function (val) {
        let refundStatus={
          0:'未退款',1:'退款中',2:'退款成功',3:'退款失败'
        }
        return refundStatus[val]
      },

    },
    methods: {
      filterTip(field) {
        return field + 1
      },
      handleImageUrl(row) {
        return row.imageUrl || row.homeImage || row.image || row.mainImage || row.realiaImage
      },
      handlePreview(url) {
        this.dialogVisible = true
        this.imageUrl = url
      },
      offlineclick(index, row) {
        this.$emit('offline-click', index, row)
      },
      changeStatus(val, row) {
        this.$emit('change-status', Number(val), row)
      },
      cellClick(row, column, cell, event) {
        this.$emit('cell-click', row, column, cell)
      },
      tableSelectionChange(val) {
        this.$emit('select-change', val)
      },
      selectRow(selection, row) {
        this.$emit('select-row', selection, row)
      },
      sortChange(column) {
        this.$emit('sort-change', column)
      },
      selectAll(selection) {
        this.$emit('select-all', selection)
      },
      indexFn(index) {
        return (this.indexMethod && this.indexMethod(index)) || (index + 1)
      },
      collectChange(index, row) {
        this.$emit('collect-hange', row, index)
      },
      expandChange(row, expandedRows) {
        this.$emit('expanded-rows', row, expandedRows)
      },
      editBtn(index, row) {
        this.$emit('edit-btn', row, index)
      },
      editDel(index, row) {
        this.$emit('edit-del', row, index)
      },
      editLook(index, row) {
        this.$emit('edit-look', row, index)
      },
      editBtnClick(index, row, type) {
        switch (type) {
          case 'switchStatus':
            this.$confirm(`确定${row.enable || row.enabled || row.publishStatus ? '禁用' : '启用'}吗？是否继续?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$emit('edit-btnclick', row, index, type)
            })
            break
          case 'delete':
            this.$confirm(`确定删除吗？是否继续?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$emit('edit-btnclick', row, index, type)
            })
            break
          default:
            this.$emit('edit-btnclick', row, index, type)
        }

      }
    },
    components: {
      //TransactionView,
      //ApplyafterView,
      //RefundView,
      //ConsignmentView
    },
    created: function () {
      let _this = this
      _this.routename = _this.$route.name || ''
    },
    watch: {
      '$route'(to, from) {
        let _this = this
        _this.routename = to.name || ''
      }
    }
  }
</script>

<style lang="scss">
  .main-img {
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }

  .goods_url {
    cursor: pointer;

    &:hover {
      color: #409EFF
    }
  }

  .vip-num {
    margin-right: 20px;
  }


  // 星号 居中
  .el-table {
    .cell {
      text-align: center;
    }
  }

</style>
